﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        html {
            overflow: hidden;
        }

        body {
            color: #fff;
            background: rgba(42, 44, 64, .8);
        }

        .layui-form-item {
            width: 313px !important;
            border: 1px #fff solid;
            margin-bottom: 0px !important;
            border-bottom: none;
        }

        .layui-input {
            background-color: #fff !important;
            height: 30px;
            margin-top: 5px
        }

        .active {
            border: 1px solid #fc0 !important;
            box-shadow: 0 0 8px #ddd;
            -moz-box-shadow: 0 0 8px #ddd;
            -webkit-box-shadow: 0 0 8px #ddd;
            cursor: pointer;
        }

        .layui-form-label {
            width: 100px !important;
            padding: 11px 15px !important;
            border-right: 1px #fff solid;
            font-weight: bold !important;
            font-size: 14px;
            text-align: center;
        }

        .layui-input-block {
            width: 150px !important;
            margin-left: 150px !important;
        }

        .mCSB_container {
            margin-right: 17px !important;
        }

        legend {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            margin-top: 20px;
        }

        .layui-this {
            color: rgb(27, 83, 140) !important;
            font-weight: bold !important;
            font-size: 16px !important;
        }

        .layui-tab-title .layui-this:after {
            border-bottom: 2px solid rgb(27, 83, 140) !important;
        }

        .layui-tab-content {
            padding: 0 !important;
        }

        .layui-prop {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="layui-prop">
        <div class="props text" style="display: none">
            <legend>样式信息</legend>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" style="line-height: 38px;">
                        文字标签
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input id="textName" type="text" value="test" name="name" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">颜色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-text" style=" display: inline-block;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position: relative;">
                    <label class="layui-form-label">透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px;">
                        <div id="opacity-text" class="demo-slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">字体大小</label>
                    <div class="layui-input-block">
                        <input id="fontValue" type="text" value="30" name="title" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否背景</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchBg" title="开关">
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">背景颜色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-text3" style=" display: inline-block;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position: relative;">
                    <label class="layui-form-label">背景颜色透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px;">
                        <div id="opacity-text3" class="demo-slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大可视距离</label>
                    <div class="layui-input-block">
                        <input id="textMaxview" type="text" value="100000000000" name="title" lay-verify="title"
                            autocomplete="off" placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                    <label class="layui-form-label">最小可视距离</label>
                    <div class="layui-input-block">
                        <input id="textMinview" value="0" type="text" name="title" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
        <div class="props coord" style="display: none;">
            <legend>样式信息</legend>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" style="line-height: 38px;">
                        图片标签
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input id="imageName" type="text" value="test" name="title" lay-verify="title"
                            autocomplete="off" placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择图片</label>
                    <div class="layui-input-block">
                        <button onclick="FHKimage('node_modules/FHK/library/library.html',FHKimageCb)"
                            style="height: 30px;line-height: 30px;margin-top: 5px;" type="button" class="layui-btn"
                            id="upload-image">选择文件</button>
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">图标颜色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-coord" style="display: inline-block;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position: relative;">
                    <label class="layui-form-label">透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px;">
                        <div id="opacity-coord" class="demo-slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">大小比例</label>
                    <div class="layui-input-block">
                        <input id="imageScale" type="text" name="title" value="1" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大可视距离</label>
                    <div class="layui-input-block">
                        <input id="imageMaxView" type="text" value="100000000000" name="title" lay-verify="title"
                            autocomplete="off" placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最小可视距离</label>
                    <div class="layui-input-block">
                        <input id="imageMinView" value="0" type="text" name="title" lay-verify="title"
                            autocomplete="off" placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">旋转角度</label>
                    <div class="layui-input-block">
                        <input id="imageRotation" type="text" name="title" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标长度</label>
                    <div class="layui-input-block">
                        <input id="imageHeight" type="text" name="title" value="40" lay-verify="title"
                            autocomplete="off" placeholder="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标宽度</label>
                    <div class="layui-input-block">
                        <input id="imageWidth" type="text" value="40" name="title" lay-verify="title" autocomplete="off"
                            placeholder="0" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                    <label class="layui-form-label">是否显示</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchImage"
                            title="开关">
                    </div>
                </div>
                <!--            <div class="layui-form-item" style="border-bottom: 1px #fff solid">-->
                <!--                <label class="layui-form-label">单击显示类型</label>-->
                <!--                <div class="layui-input-block">-->
                <!--                    <select id="topTipPointImgType" name="line" lay-filter="topTipPointImgType">-->
                <!--                        <option value="conven">常规</option>-->
                <!--                        <option value="img">图片</option>-->
                <!--                        <option value="web">网页</option>-->
                <!--                    </select>-->
                <!--                </div>-->
                <!--            </div>-->
                <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                    <label class="layui-form-label">单击显示</label>
                    <div class="layui-input-inline" style="margin: 0">
                        <!--                    <input style="width: 100px;display: inline-block;margin-left: 10px;" id="topTipPointImg" type="text" name="title" lay-verify="title"  autocomplete="off" placeholder="请输入内容" class="layui-input">-->
                        <button onclick="window.parent.layerTipEdit('img')"
                            style="height: 30px;line-height: 30px; margin: 6px 24px;" type="button"
                            class="layui-btn">编辑</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <script src="../node_modules/jquery-2.0.3.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script>
        var Cesium = parent.Cesium
        var viewer = parent.Viewer
        //全局变量
        let editGraphic = parent.editGraphic;

        if (parent.propKind != undefined) {
            $('.layui-prop>div').eq(parent.propKind).show();
        }

        $('.props input[name="name"]').on('input propertychange', function (event) {
            var value = $(this).val();
            if (editGraphic.entity) {
                editGraphic.entity.name = value;
                editGraphic.graphic.text = value;
            }
        });

        layui.use(['element', 'form', 'upload', 'slider', 'colorpicker'], function () {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            var form = layui.form;
            var upload = layui.upload;
            var slider = layui.slider;
            var colorpicker = layui.colorpicker;

            slider.render({
                elem: '#opacity-text'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: (editGraphic && editGraphic.alpha) || 100
                , change: function (value) {
                    editGraphic.alpha = value;
                    if (editGraphic.graphic && editGraphic.graphic.fillColor) {
                        editGraphic.graphic.fillColor._value.alpha = editGraphic.alpha / 100;
                    }
                }
            });
            slider.render({
                elem: '#opacity-text3'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: (editGraphic && editGraphic.bg_alpha) || 50
                , change: function (value) {
                    editGraphic.bg_alpha = value;
                    if (editGraphic.graphic && editGraphic.graphic.backgroundColor) {
                        editGraphic.graphic.backgroundColor._value.alpha = editGraphic.bg_alpha / 100;
                    }
                }
            });
            colorpicker.render({
                elem: '#colorchk-text'
                , color: (editGraphic && editGraphic.fillColor) ? editGraphic.fillColor : '#fff' //设置默认色
                , done: function (color) {
                    var alpha = (editGraphic.graphic._fillColor && editGraphic.graphic._fillColor._value.alpha) || 1;
                    editGraphic.graphic.fillColor = new Cesium.Color.fromCssColorString(color).withAlpha(alpha);
                    editGraphic.fillColor = color;
                }
            });
            colorpicker.render({
                elem: '#colorchk-text3'
                , color: (editGraphic && editGraphic.backgroundColor) ? editGraphic.backgroundColor : '#fff' //设置默认色
                , done: function (color) {
                    var alpha = (editGraphic.graphic._backgroundColor && editGraphic.graphic._backgroundColor._value.alpha) || 1;
                    editGraphic.graphic.backgroundColor = new Cesium.Color.fromCssColorString(color).withAlpha(alpha);
                    editGraphic.backgroundColor = color;
                }
            });
        });

        function init() {
            if (textArr[0]) {
                var content = textArr[0].item.label._text._value;
                $('#textContent').val(content);
                if (textArr[0]) {
                    var font = textArr[0].item.label.font._value;
                    var fontValue = parseInt(font.split(' ')[0]);
                    $('#fontValue').val(fontValue);
                }
                if (textArr[0].item.label._distanceDisplayCondition) {
                    var near = textArr[0].item.label._distanceDisplayCondition._value._near;
                    var far = textArr[0].item.label._distanceDisplayCondition._value._far;
                    $('#textMaxview').val(far);
                    $('#textMinview').val(near);
                }
                if (textArr[0].item._name) {
                    $('#textName').val(textArr[0].item._name);
                }
            }
            if (pointArr[0]) {
                if (pointArr[0].item && pointArr[0].item._point._scaleByDistance && pointArr[0].item._point._scaleByDistance._value) {
                    var size = pointArr[0].item._point._scaleByDistance._value.nearValue;
                    $('#scale1').val(size);
                }
                if (pointArr[0].item.point._distanceDisplayCondition) {
                    var near = pointArr[0].item.point._distanceDisplayCondition._value._near;
                    var far = pointArr[0].item.point._distanceDisplayCondition._value._far;
                    $('#pointMaxView').val(far);
                    $('#pointMinView').val(near);
                }
                if (pointArr[0].item.name) {
                    $('#pointName').val(pointArr[0].item.name);
                }
            }
            if (imageArr[0]) {
                if (imageArr[0].item._billboard._distanceDisplayCondition) {
                    var near = imageArr[0].item._billboard._distanceDisplayCondition._value._near;
                    var far = imageArr[0].item._billboard._distanceDisplayCondition._value._far;
                    $('#imageMaxView').val(far);
                    $('#imageMinView').val(near);
                }
                if (imageArr[0].item._billboard._height && imageArr[0].item._billboard._height._value) {
                    var h = imageArr[0].item._billboard._height._value
                    $('#imageHeight').val(h);
                }
                if (imageArr[0].item._billboard._width && imageArr[0].item._billboard._width._value) {
                    var w = imageArr[0].item._billboard._width._value
                    $('#imageWidth').val(w);
                }
                if (imageArr[0].item._billboard._rotation && imageArr[0].item._billboard._rotation._value) {
                    var r = Cesium.Math.toDegrees(imageArr[0].item._billboard._rotation._value)
                    $('#imageRotation').val(-r);
                }
                if (imageArr[0].item._billboard._scaleByDistance && imageArr[0].item._billboard._scaleByDistance._value) {
                    var size = imageArr[0].item._billboard._scaleByDistance._value.nearValue;
                    $('#imageScale').val(size);
                }
                if (imageArr[0].item.name) {
                    $('#imageName').val(imageArr[0].item.name);
                }

                if (imageArr[0].tipVal) {
                    if (imageArr[0].tipVal != '无内容') {
                        $('#topTipPointImg').val(imageArr[0].tipVal);
                    }
                }
            }
            if (modelArr[0]) {
                if (modelArr[0].scale) {
                    $('#modelScale').val(modelArr[0].scale)
                }
                if (modelArr[0].distanceDisplayCondition) {
                    var near = modelArr[0]._distanceDisplayCondition._near;
                    var far = modelArr[0]._distanceDisplayCondition._far;
                    $('#modelMaxView').val(far);
                    $('#modelMinView').val(near);
                }
                if (modelArr[0].name) {
                    $('#modelName').val(modelArr[0].name);
                } else {
                    $('#modelName').val('模型标签')
                }
            }
        };
    // init();
    </script>
</body>

</html>